<template>
	<div class="page-container color-generator">
		<h1>色彩随机生成工具</h1>
		<div class="color-box-container">
			<div v-for="(color, index) in colors" :key="index" class="color-box" :style="{ backgroundColor: color }"
				@click="copyColor(color)">
				{{ color }}
			</div>

		</div>
		<el-button type="primary" @click="generateColors()">生成</el-button>

	</div>
</template>

<script>
	import tinycolor from 'tinycolor2';

	export default {
		data() {
			return {
				colors: [],
			};
		},
		methods: {
			generateColors() {
				const colorCount = 4;
				let generatedColors = [];

				for (let i = 0; i < colorCount; i++) {
					// 随机生成颜色
					const randomColor = tinycolor.random().toHexString();
					generatedColors.push(randomColor);
				}

				this.colors = generatedColors;
			},
			copyColor(color) {
				// 复制颜色值到剪贴板
				navigator.clipboard.writeText(color);
				this.$message.success(`已复制 ${color} 到剪贴板`);
			},
		},
	};
</script>

<style lang="scss">
	.color-generator {
		.color-box-container {
			height: 100px;
			display: flex;
			justify-content: space-between;
			margin-bottom: 40px;
		}

		.color-box {
			width: 10rem;
			height: 100px;
			border: 1px solid #000;
			border-radius: 5px;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-weight: bold;
			font-size: 1rem;
			cursor: pointer;
		}
	}
</style>
